<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="createUserValidation.js"></script>
<LINK REL="stylesheet" HREF="CSS/Main.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="CSS/Button.css" TYPE="text/css">
</head>
<body>
	<div id="top">
		<h1>Master Data Management</h1>
		<br> <a id="log" href="logout">Logout</a><br>
		 <%@ include file="redirection.jsp" %> 
		<div id="menu"></div>
	</div>


	<br>
	<div id="left">
		<form action="CreateUser" method="Post">
			<div class="box">
				<Table>
					<tr>
						<td>Username:</td>
						<td><input type="text" name="Username" id="user" onkeyup="validate()" autofocus ></td>
					</tr>
					<tr>
						<td colspan="2"><p id="checkuser"></p></td>
					</tr>
					<tr>
						<td>Password:</td>
						<td><input type="password" name="Password" id="pass"></td>
					</tr>
					<tr>
						<td colspan="2"><p id="checkpass"></p></td>
					</tr>
					<tr>
						<td>Role:</td>
						<td><select name="role">
								<option value="admin">Admin</option>
								<option value="user">User</option>

						</select></td>
					</tr>
				</Table>
				<input type="submit" class="button" name="submit" onclick="return checkUser();" value="Submit">
			</div>
		</form>
		<div class="visbox">
				<form action="Home.jsp">
					<input type="submit" class="button"name="Home" value="Home">
				</form>		
		</div>
	</div>

<script type="text/javascript">

function checkUser() {
	var username = document.getElementById("user").value
	var password=document.getElementById("pass").value
	var checkuser=document.getElementById("checkuser")
	var checkpass=document.getElementById("checkpass")
	checkuser.style.color="red";
	checkpass.style.color="red";
    if(username=="")
    	{
    	checkuser.innerHTML="Username cannot be blank";
    	return false;    	
    	}
	if(password==""){
		checkpass.innerHTML="Password cannot be blank";
    	return false;
	}
  
}

function validate()
{ 
	
	
	var username = document.getElementById("user").value

	len=username.length;	
	var check=document.getElementById("checkuser")
	check.style.color="red";
	
 	if(len>100)
	 {
 		
	 		check.innerHTML="Sorry username cant exceed 100 characters";
	 
	 }
 
 
 	else if(/^[a-zA-Z]*$/.test(username.charAt(0)) == false)
	 {
	  		check.innerHTML="Username needs to start with alphabet";
	 }
	
 	else{
 		check.innerHTML="";
 	}
	
	
}

</script>


</body>
</html>